<template>
  <div class="xq">
    详情
    <div class="tp">
      <img
        src="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u2233.svg"
        alt=""
      />
    </div>
  </div>
  <van-tabs v-model:active="active">
    <van-tab title="课程介绍">
      <div class="a">
        <h3>UI设计全进阶教程（名师课程）35课时，赠送超值学习礼包</h3>

        <van-rate
          v-model="value"
          :count="5"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        &emsp;5.0 &emsp;2345人学过
        <h2>免费</h2>
      </div>
      <div class="a1">
        <h4>课程介绍</h4>
        <img
          src="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u5915.png"
          alt=""
        />
      </div>
      <p class="a2">
        UI设计基础班+UI视觉系统班+UI设计案例强化班+UI交互设计系统班+UI动效系统班
        <br />
        UI设计全能就业班新一期开班，经过了全新的升级，
        <br />
        打造出了一套全新的系统课程。
        <br />
        所讲到的内容有，涉及到UI设计工作需要的所有技能。PS软件，AI软件，AE软件，Axure软件，APP设计，主题设计，切图，适配，规范，兼职接单，上线项目讲解，网页设计，基础代码，BANNER，小程序的设计，H5的设计交互设计，用户体验，美术基础，版式布局，图标设计，布尔运算，透视原理，界面设计，动效设计，就业指导，作品集制作，审美能力的提升，创意能力的提升。
      </p>
    </van-tab>
    <van-tab title="目录">内容 2</van-tab>
    <van-tab title="评价">内容 3</van-tab>
    <van-tab title="推荐">
      <span>
        <h4>相关课程推荐</h4>
      </span>
      <van-card
        v-for="(item, i) in homeData"
        :key="item.id"
        :price="item.price"
        desc="6677正在学"
        :title="item.title"
        thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u2233.svg"
      />
    </van-tab>
  </van-tabs>
</template>
<script>
import { ref } from 'vue'
import axios from 'axios'
export default {
  name: 'Xq',
  data() {
    const active = ref(0)
    const value = ref(4)
    return {
      active,
      value,
      homeData: {},
      active: 0,
      // images: [data.image1, data.image2],
      themeVars: {
        cardThumbSize: '100px',
        carTextSize: '20px',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '20px',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data.list7
      })
      .catch(console.error)
  },
}
</script>
<style lang="less" scoped>
.tp {
  width: 100%;
  height: 100px;

  img {
    width: 100%;
    height: 100%;
  }
}

.a {
  height: 10%;
  padding: 10%;
  margin-top: -20px;
  border-bottom: 10px solid #ccc;
}

.a1 {
  h4 {
    padding: 10%;
    margin-bottom: -45px;
    margin-top: -30px;
  }

  img {
    width: 80%;
    height: 120px;
    padding: 10%;
  }
}

.a2 {
  padding: 10%;
  font-size: 12px;
  margin-top: -70px;
}
</style>
